<template>
  <div>
    <div class="d-sm-flex justify-content-between align-items-center mb-4">
      <h3 class="text-dark mb-0">商品预览</h3>
    </div>
    <div class="row">
      <div class="col-lg-6 col-xl-6" v-show="showAddCard">
        <div class="card shadow mb-4">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="text-primary fw-bold m-0">添加商品</h6>
            <el-button type="primary" size="mini" @click="addGood()">添加</el-button>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-lg-4 col-xl-4">
                <span style="line-height: 32px">商品名称</span>
              </div>
              <div class="col-lg-8 col-xl-8">
                <el-input size="small" v-model="good.gname"></el-input>
              </div>
            </div>
            <div class="row" style="margin-top: 10px">
              <div class="col-lg-4 col-xl-4">
                <span style="line-height: 32px">商品种类</span>
              </div>
              <div class="col-lg-8 col-xl-8">
                <el-select size="small" v-model="good.gkind">
                  <el-option value="食品" label="食品"></el-option>
                  <el-option value="饮料" label="饮料"></el-option>
                  <el-option value="生活用品" label="生活用品"></el-option>
                  <el-option value="学习用品" label="学习用品"></el-option>
                </el-select>
              </div>
            </div>
            <div class="row" style="margin-top: 10px">
              <div class="col-lg-4 col-xl-4">
                <span style="line-height: 32px">库存数量</span>
              </div>
              <div class="col-lg-8 col-xl-8">
                <el-input-number size="small" :min="1" v-model="good.gnumber"></el-input-number>
              </div>
            </div>
            <div class="row" style="margin-top: 10px">
              <div class="col-lg-4 col-xl-4">
                <span style="line-height: 32px">商品价格</span>
              </div>
              <div class="col-lg-8 col-xl-8">
                <el-input-number size="small" :min="1" v-model="good.gprice"></el-input-number>
              </div>
            </div>
            <div class="row" style="margin-top: 10px">
              <div class="col-lg-4 col-xl-4">
                <span style="line-height: 32px">商品图片</span>
              </div>
              <div class="col-lg-8 col-xl-8">
                <el-input size="small" v-model="good.gsrc" placeholder="路径或者网址"></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-6 col-xl-6" v-show="showUpdateCard">
        <div class="card shadow mb-4">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="text-primary fw-bold m-0">修改信息</h6>
            <el-button type="primary" size="mini" @click="updateGood()">提交</el-button>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-lg-4 col-xl-4">
                <span style="line-height: 32px">商品名称</span>
              </div>
              <div class="col-lg-8 col-xl-8">
                <el-input size="small" v-model="selectGood.gname"></el-input>
              </div>
            </div>
            <div class="row" style="margin-top: 10px">
              <div class="col-lg-4 col-xl-4">
                <span style="line-height: 32px">商品种类</span>
              </div>
              <div class="col-lg-8 col-xl-8">
                <el-select size="small" v-model="selectGood.gkind">
                  <el-option value="食品" label="食品"></el-option>
                  <el-option value="饮料" label="饮料"></el-option>
                  <el-option value="生活用品" label="生活用品"></el-option>
                  <el-option value="学习用品" label="学习用品"></el-option>
                </el-select>
              </div>
            </div>
            <div class="row" style="margin-top: 10px">
              <div class="col-lg-4 col-xl-4">
                <span style="line-height: 32px">库存数量</span>
              </div>
              <div class="col-lg-8 col-xl-8">
                <el-input-number size="small" :min="1" v-model="selectGood.gnumber"></el-input-number>
              </div>
            </div>
            <div class="row" style="margin-top: 10px">
              <div class="col-lg-4 col-xl-4">
                <span style="line-height: 32px">商品价格</span>
              </div>
              <div class="col-lg-8 col-xl-8">
                <el-input-number size="small" :min="1" v-model="selectGood.gprice"></el-input-number>
              </div>
            </div>
            <div class="row" style="margin-top: 10px">
              <div class="col-lg-4 col-xl-4">
                <span style="line-height: 32px">商品图片</span>
              </div>
              <div class="col-lg-8 col-xl-8">
                <el-input size="small" v-model="selectGood.gsrc"></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-card shadow="always">
      <el-table :data="goods" stripe>
        <el-table-column label="商品ID" prop="gid" width="80px"></el-table-column>
        <el-table-column label="名称" prop="gname"></el-table-column>
        <el-table-column label="种类" prop="gkind"></el-table-column>
        <el-table-column label="库存" prop="gnumber"></el-table-column>
        <el-table-column label="价格" prop="gprice" width="100px"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="getSelectGood(scope.row);showAddCard=false">修改</el-button>
            <el-button type="danger" size="small" @click="deleteSelectGood(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-button type="primary" size="mini" style="margin-top: 10px" @click="showAddCard=true;showUpdateCard=false">添加</el-button>
      <el-button type="primary" size="mini" style="margin-top: 10px" @click="showAddCard=false;showUpdateCard=false;getAllGoods()">刷新</el-button>

    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "GoodsConf",
  data() {
    return {
      goods:[],
      showUpdateCard:false,
      showAddCard:false,
      selectGood:{
        sid:'',
        gname:'',
        gkind:'',
        gnumber:'',
        gprice:'',
        gsrc:''
      },
      good:{
        sid:sessionStorage.getItem("sid"),
        gname:'',
        gkind:'',
        gnumber:'',
        gprice:'',
        gsrc:''
      },
    }
  },
  methods:{
    getSelectGood(value){
      this.selectGood.gid = value.gid;
      this.selectGood.gname = value.gname;
      this.selectGood.gkind = value.gkind;
      this.selectGood.gnumber = value.gnumber;
      this.selectGood.gprice = value.gprice;
      this.selectGood.gsrc = value.gsrc;
      this.showUpdateCard = true;
    },
    deleteSelectGood(value){
      axios.get('http://localhost:9001/goods/deleteGoods?gid='+value.gid).then(res=>{
        this.$message.success("删除成功");
        this.getAllGoods();
      })
    },
    addGood(){
      if (this.good.gname ===''){
        this.$message.error("请输入商品名称");
      } else if (this.good.gkind ===''){
        this.$message.error("请输入商品种类");
      } else {
        axios.post('http://localhost:9001/goods/addGoods',this.good).then(res=>{
          this.$message.success("添加成功");
          this.getAllGoods();
        })
        this.showAddCard=false;
      }
    },
    updateGood(){
      if (this.selectGood.gname ===''){
        this.$message.error("请输入商品名称");
      } else if (this.selectGood.gkind ===''){
        this.$message.error("请输入商品种类");
      } else {
        axios.post('http://localhost:9001/goods/updateGoods',this.selectGood).then(res=>{
          this.$message.success("修改成功");
          this.getAllGoods();
        })
        this.showUpdateCard=false;
      }
    },
    getAllGoods(){
      axios.get('http://localhost:9001/goods/selectGoodsBySid?sid='+sessionStorage.getItem("sid")).then(res=>{
        this.goods = res.data;
      })
    }
  },
  created() {
    this.getAllGoods();
  }
}
</script>

<style scoped>
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.demo-table-expand{
  /*font-size: 0;*/

}
</style>